<template>
  <div class="flex radio-transfer" :style="style">
    <div class="flex-1 h-100 flex-column radio-transfer__item">
      <div class="title flex">
        <div>{{ leftTitle }}</div>
        <div class="text-right flex-1 radio-transfer__total">
          {{ leftList.length }}
        </div>
      </div>
      <div class="search">
        <el-input v-model="leftSearchValue" prefix-icon="el-icon-search" placeholder="请输入名称" />
      </div>
      <div v-loading="leftLoading" class="list">
        <div v-for="item in leftList" :key="item[defaultProps.value]" class="list__item">
          <el-radio v-model="leftRadio" :label="item[defaultProps.value]">
            {{ item[defaultProps.label] }}
          </el-radio>
        </div>
      </div>
    </div>
    <div class="h-100 btns">
      <div class="text-center">
        <el-button type="primary" icon="el-icon-arrow-left" :disabled="!rightRadio" @click="move('left')" />
        <el-button type="primary" icon="el-icon-arrow-right" :disabled="!leftRadio" @click="move('right')" />
      </div>
    </div>
    <div class="flex-1 h-100 flex-column radio-transfer__item">
      <div class="title flex">
        <div>{{ rightTitle }}</div>
        <div class="text-right flex-1 radio-transfer__total">
          {{ valueList.length }}
        </div>
      </div>
      <div class="search">
        <el-input v-model="rightSearchValue" prefix-icon="el-icon-search" placeholder="请输入名称" />
      </div>
      <div v-loading="rightLoading" class="list">
        <div v-for="item in rightList" :key="item[defaultProps.value]" class="list__item">
          <el-radio v-model="rightRadio" :label="item[defaultProps.value]">
            {{ item[defaultProps.label] }}
          </el-radio>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
/**
 * @param {Boolean} [filterable = true]   是否需要过滤
 * @param {String} [leftTitle = '未选列表']
 * @param {String} [rightTitle = '已选列表']
 * @param {String} [height = '300px']
 * @param {Array} valueList  选中列表
 * @param {Array} totalList  总列表
 * @param {Object} defaultProps     属性字段
 */
import { cloneDeep } from 'lodash'

export default {
  props: {
    defaultProps: {
      type: Object,
      default() {
        return {
          value: 'value',
          label: 'label'
        }
      }
    },
    leftTitle: {
      type: String,
      default: '未选列表'
    },
    rightTitle: {
      type: String,
      default: '已选列表'
    },
    height: {
      type: String,
      default: '300px'
    },
    totalList: {
      type: Array,
      required: true
    },
    valueList: {
      type: Array,
      required: true
    },
    filterable: {
      type: Boolean,
      default: true
    },
    rightLoading: Boolean,
    leftLoading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      style: {
        height: this.height
      },
      rightRadio: '',
      leftRadio: '',
      rightSearchValue: '',
      leftSearchValue: ''
    }
  },
  computed: {
    leftList() {
      const valueList = this.valueList
      let arr = this.totalList.filter((item) => {
        return !valueList.some((one) => one[this.defaultProps.value] === item[this.defaultProps.value])
      })
      if (this.leftSearchValue && this.leftSearchValue !== '') {
        arr = arr.filter((item) => {
          return item[this.defaultProps.label].indexOf(this.leftSearchValue) >= 0
        })
      }
      return arr
    },
    rightList() {
      let arr = this.valueList
      if (this.rightSearchValue && this.rightSearchValue !== '') {
        arr = arr.filter((item) => {
          return item[this.defaultProps.label].indexOf(this.rightSearchValue) >= 0
        })
      }
      return arr
    }
  },
  created() {},
  methods: {
    move(direction) {
      let moveItem = null
      if (direction === 'left') {
        const index = this.valueList.findIndex((item) => {
          return item[this.defaultProps.value] === this.rightRadio
        })
        if (index !== -1) {
          moveItem = cloneDeep(this.valueList[index])
          this.valueList.splice(index, 1)
        }
        this.rightRadio = ''
      } else {
        const item = this.totalList.find((item) => {
          return item[this.defaultProps.value] === this.leftRadio
        })
        if (item) {
          moveItem = cloneDeep(item)
          this.valueList.push(item)
        }
        this.leftRadio = ''
      }

      this.$emit('transfer', {
        direction,
        item: moveItem
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.radio-transfer {
  .radio-transfer__item {
    border: 1px solid #ddd;
    border-radius: 4px;

    .title {
      line-height: 3em;
      padding: 0 16px;
      color: #000;
      background: #eff1f2;

      .radio-transfer__total {
        color: #999;
      }
    }

    .search {
      padding: 8px 16px;
    }

    .list {
      overflow-y: auto;
      padding: 16px;

      .list__item {
        padding-bottom: 16px;
      }
    }
  }

  .btns {
    width: 160px;

    & > div {
      position: relative;
      top: 40%;
    }
  }
}
</style>
